<template>
  <!-- 最新公告 -->
  <div class="notice" @mouseleave="mouseleave()"  @mouseenter="mouseenter()">
    <title-line class="title" :title="title"  v-if="$utils.getPc()==1" />
    <time-line  v-if="timeList.length >0"  class="time-line" :list="timeList" @change="timeLineChanage" :isloop="isLoop"/>
    <div class="list">

      <div class="item" v-for="item in data?.article" :key="item">
        <div class="left">
          <div class="block"></div>
          <div class="text">
            <div class="title-t">{{ item.name }}</div>
            <div class="date">公告时间 ：<span v-if="item.year">{{item.year}}</span>  <span v-if="item.month">-{{item.month}}</span>  <span v-if="item.day">-{{item.day}}</span>  </div>
          </div>
        </div>
        <div class="right" @click="detail(item)">点击预览</div>
        <div class="line"></div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :page-count="total" @current-change="pageChange" />
    </div>
  </div>
  <!-- 移动端 -->
  <div class="noticeMobile"  v-if="$utils.getPc()==2">
    <title-line class="title" :title="title" />

    <time-line v-if="timeList.length >0" class="time-line" :list="timeList" @change="timeLineChanage" />
    <div class="list">
      <div class="item" v-for="item in data?.article" :key="item">
        <div class="left">
          <div class="block"></div>
          <div class="text">
            <div class="title-t">{{ item.name }}</div>
            <div class="date-t">公告时间 ： <span v-if="item.year">{{item.year}}</span>  <span v-if="item.month">-{{item.month}}</span>  <span v-if="item.day">-{{item.day}}</span>         </div>
          </div>
        </div>
        <div class="right" @click="detail(item)">点击预览</div>
        <div class="line"></div>
      </div>
    </div>
    <div class="pagination" @click="nextPage">

      <div class="text"> 加载更多</div>
      <img class="ic" v-if="page < total" src="../../../assets/image/publice/bottom-arrow.png" />
      <img class="ic" v-if="page == total" src="../../../assets/image/publice/top-arrow.png" />
    </div>
  </div>
</template>

<script>

import timeLine from '../../../components/time-line.vue'
export default {
  components: { timeLine },
  data() {
    return {
      page: 1,
      total: 1,

      data: { article: [] },
      year: "",
      timeList: [],
      title: "最新公告",
      isLoop:true

    };
  },

  mounted() {
    //获取页面标题
    this.title = this.$utils.getNavName("investorsNotice");
    this.getTimeData();

  },
  methods: {
    /**
     * 移出
     */
    mouseleave(){
      this.isLoop = true;
    },
    /**
     * 移入
     */
    mouseenter(){
      this.isLoop = false;
    },
    /**
     * 获取时间线数据
     */
    async getTimeData() {
      try {
        //获取时间线数据
        const time = await this.$request.get("/khcommon/timeLine", {
          params: {
            cid: this.$utils.getNavId("investorsNotice"),
          }
        });
        this.timeList = time.data;
        this.year = this.timeList?.[0]?.year;
        this.getData();

        this.$emit("change", 1);

      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
    /**
  * 获取列表数据
  */
    async getData() {

      try {

        const result = await this.$request.get("/Investorservices/PeriodicReports", {
          params: {
            //最新公告sId
            cid: this.$utils.getNavId("investorsNotice"),
            page: this.page,
            pagenum: 8,
            year: this.year,
            page_is: 1

          }
        });

        if (document.body.clientWidth <= 1200) {
          if (result.data.article.length > 0) {
            this.data.article = this.data.article.concat(result.data.article);
          } else {
            this.$message('没有更多数据了');
          }
        } else {
          this.data = result.data;
        }



        this.total = result.data.totalpage;


      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },

    more() {
      this.page++;
      this.getData();
    },
    /**
       * 时间线事件更改
       */
    timeLineChanage(e) {
     
      this.page = 1;
      this.year = e;
      this.data.article = [];
      this.getData();

    },


    nextPage() {

      if (this.total != 1 && this.page < this.total) {

        this.page++;
        this.getData();
      } else {
        this.$message("沒有更多数据了");
      }
    },
    /**
    * 最新公告详情
    * 
    */
    detail(e) {
      if (e.url) {
        window.open(e.url);
      }
      else if (e.videofile) {
        window.open(e.videofile, "_blank");
      }
      else {
        this.$router.push({
          name: 'investorsDetail',
          query: {
            id: e.id,
          },

        });
      }


    },
    /**
    * 页面跳转
    */
    pageChange(e) {
      // 设置页号
      console.log(e);
      this.page = e;
      // 获取数据
      this.getData();

    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .noticeMobile {
    display: none;
  }

  .notice {
    position: relative;
    height: 100%;
    width: 100%;

    .title {
      margin: 0 36px;
    }

    .time-line {
      margin-top: 20px;
    }

    .pagination {
      position: absolute;
      bottom: 0;
      right: 36px;
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
    }

    .list {
      margin: 0 36px;

      .item {
        position: relative;
        padding-top: 18px;
        padding-bottom: 18px;
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;

          .block {
            margin-top: 4px;
            width: 9px;
            height: 9px;
            background: #EB7803;
          }

          .text {
            margin-left: 10px;
            display: flex;
            flex-direction: column;

            .title-t {
              width: 600px;
              @include fn.title();
              line-height: 20px;

            }

            .date {
              margin-top: 12px;
              @include fn.describe();
              line-height: 20px;
            }
          }
        }

        .right {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;

          width: 90px;
          height: 35px;
          background: #F6F6F6;
          border-radius: 6px;
          font-size: 14px;
         
          font-weight: 400;
          color: #666666;

        }

        .line {
          position: absolute;
          bottom: 0;
          width: 820px;

          border: 1px dashed #EFEFEF;
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .notice {
    display: none;
  }

  .noticeMobile {
    position: relative;

    width: 100%;
    padding-bottom: fn.rpx(40);
    background-color: #fff;
    border-radius: fn.rpx(10);

    .title {
      margin: fn.rpx(30);
    }

    .time-line {
      margin-top: fn.rpx(20);
    }

    .pagination {
      // margin-top: fn.rpx(40);
      // width: 100%;
      // display: flex;
      // justify-content: center;
      cursor: pointer;
      margin-top: fn.rpx(30);
      display: flex;
      flex-direction: column;
      align-items: center;


      .text {

        font-size: fn.rpx(16);
       
        font-weight: 500;
        color: color.$base;
      }

      .ic {
        margin-top: fn.rpx(4);
        width: fn.rpx(24);
        height: fn.rpx(24);
      }
    }

    .list {
      margin: 0 fn.rpx(36);
      // height: fn.rpx(800);
      display: flex;
      flex-direction: column;

      .item {
        width: 100%;
        box-sizing: border-box;
        position: relative;
        padding-top: fn.rpx(20);
        padding-bottom: fn.rpx(20);
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;

          .block {
            margin-top: fn.rpx(4);
            width: fn.rpx(9);
            height: fn.rpx(9);
            background: #EB7803;
          }

          .text {
            margin-left: fn.rpx(10);
            display: flex;
            flex-direction: column;

            .title-t {
              @include fn.title();
              width: fn.rpx(470);
              height: fn.rpx(24);
              line-height: fn.rpx(24);
           

            }

            .date-t {
              margin-top: fn.rpx(6);
           
              @include fn.describe();

            }
          }
        }

        .right {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;

          width: fn.rpx(90);
          height: fn.rpx(35);
          background: #F6F6F6;
          border-radius: fn.rpx(6);
          font-size: fn.rpx(14);
         
          font-weight: 400;
          color: #666666;

        }

        .line {
          position: absolute;
          bottom: 0;
          width: 100%;

          border: 1px dashed #EFEFEF;
        }
      }
    }
  }
}
</style>